<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="详情"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-icon name="share-o" size="18" @click="showShare = true"/>
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item, index) of banners" :key="index" @click="ImagePreviewFn(index)">
          <van-image class="bannerImg" :src="item"/>
        </van-swipe-item>
      </van-swipe>
      <div class="van-multi-ellipsis--l2">
        {{ proname }}
      </div>
      <div>
        <span style="color: #f66">¥{{ (originprice * discount / 10).toFixed(1) }}</span> <del>¥{{ originprice }}</del>
      </div>
      <div v-html="desc"></div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { ImagePreview, NavBar, Toast, Swipe, SwipeItem, Image as VanImage, GoodsAction, GoodsActionIcon, GoodsActionButton, ShareSheet } from 'vant'
import { getProDetail } from './../../api/detail'
import { addCartFn } from './../../api/cart'
import { getStorage } from '../../utils/storage'
Vue.use(ImagePreview)
Vue.use(NavBar)
Vue.use(Swipe)
Vue.use(Toast)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(ShareSheet)
export default {
  data () {
    return {
      proid: '',
      banners: [],
      proname: '',
      originprice: 0,
      discount: 0,
      category: '',
      brand: '',
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      desc: '<h4>图文详情</h4>'
    }
  },
  methods: {
    addCart () {
      if (getStorage('loginState') === 'true') {
        addCartFn({
          proid: this.proid,
          num: 1,
          userid: getStorage('userid')
        }).then((res) => {
          console.log('res', res)
          if (res) {
            Toast('加入购物车成功')
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    ImagePreviewFn (index) {
      ImagePreview({
        images: this.banners,
        startPosition: index
      })
    },
    back () {
      this.$router.back()
    }
  },
  mounted () {
    this.proid = this.$route.query.proid
    console.log(this)
    getProDetail(this.proid).then(res => {
      console.log(res.data)
      this.banners = res.data.data.banners[0].split(',')
      this.proname = res.data.data.proname
      this.originprice = res.data.data.originprice
      this.discount = res.data.data.discount
      this.category = res.data.data.category
      this.brand = res.data.data.brand
    })
  }
}
</script>
<style lang="stylus" scoped>
.bannerImg {
  width: 100%;
  height: 3.2rem;
}
</style>
